<script setup>
const emit = defineEmits(["update:modelValue"])
import { apiGlobalGetClassificationList } from "./api"
const props = defineProps({
  modelValue: { type: Object },
  slotType: { type: String, default: "请选择" },
})

const selectValue = computed({
  get: () => {
    return props.modelValue
  },
  set: (value) => {
    emit("update:modelValue", value)
  },
})

const optionsList = ref([])

const initOptions = async () => {
  const res = await apiGlobalGetClassificationList()
  optionsList.value = res.data
}
const cascaderProps = ref({
  multiple: true,
  emitPath: false,
  value: "id",
  label: "name",
  children: "son",
})
const handleChange = (e) => {
  // console.log(e);
}
onMounted(() => {
  initOptions()
})
</script>


<template>
  <!-- 待优化  兼容业务 -->
  <el-cascader v-model="selectValue" :options="optionsList" :props="cascaderProps" @change="handleChange" v-if="slotType == 'cascader'" clearable />
  <el-select v-model="selectValue" v-bind="$attrs" v-else>
    <el-option-group v-for="group in optionsList" :key="group.id" :label="group.name">
      <el-option v-for="item in group.son" :key="item.id" :label="item.en_name" :value="item.id" />
    </el-option-group>
  </el-select>
</template>

<style scoped lang="scss"></style>
